<meta charset="UTF-8">
  <div class="content-wrapper" style='height: 100%;'>
    <section class="content-header">
      <h1 style="text-align:center;margin: -5px 0px 5px 0px;">
        	菜谱模板
      </h1>
    </section>
    <div style='background: transparent;width: 100%;height: 90%;position: relative;'>
    	
    		<div style='position: absolute;width: 23%;height: 100%;border: 1px solid #ccc;left: 1%;overflow: auto;'>
    				<div style='width: 100%;height: 50px;border-bottom: 1px solid #ccc;font-size: 16px;'>
    						<span style='margin: 12px 0px 0px 2%;display: inline-block;width: 58px;cursor: pointer;font-size: 14px;' >模板名称</span>
    						<!--<button style='margin: 12px 1%;padding: 2px 6px;background-color: #f05050;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" ng-click='delTemple()'>删除</button>
								<button style='margin: 12px 1%;padding: 2px 6px;background-color: #3c8dbc;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" ng-click='updateTemple()'>修改</button>
								<button style='margin: 12px 1%;padding: 2px 6px;background-color: #3c8dbc;font-size: 12px;width:20%;max-width: 40px;' class="btn pull-right" ng-click='addTemple()' >新增</button>-->
    						<button class="btn btn-success" style='height: 30px;line-height: 30px;padding: 0px 5px;margin-right: 3px;' ng-click='addTemple()'>新增</button>
    						<button class="btn btn-info" style='height: 30px;line-height: 30px;padding: 0px 5px;margin-right: 3px;' ng-click='updateTemple()'>修改</button>
    						<button class="btn btn-danger" style='height: 30px;line-height: 30px;padding: 0px 5px;margin-right: 3px;' ng-click='delTemple()'>删除</button>
    				</div>
    				<div id='menuTemple_{{c.id}}' class='menuTemple' ng-class="{even:!$even, odd:!$odd}"  ng-repeat='c in templates' ng-click='searchDishes(c.id,c.name)'
    					style='position: relative;height: 40px;width: 100%;padding: 0px 0px 0px 14px;font-size: 18px;cursor: pointer;line-height: 40px;'>{{c.name}}</div>
    		</div>
    		<div style='position: absolute;width: 75%;height: 100%;border: 1px solid #ccc;right: 1%;overflow: auto;'>
    								<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 180px;vertical-align: middle;margin: 12px 0px 10px 15px;'>
											<input class="form-control" type="text" placeholder="请输入菜品名称 " ng-model="cardInfor" >
										</div>
										<button style='margin: 12px 1%;padding: 4px 12px;' class="btn pull-right" ng-click="download('dishTable','模板信息_',templeName)"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>
										<button style='margin: 12px 1%;padding: 4px 12px;background-color: #3c8dbc;' class="btn pull-right" ng-click="jump('/templateEdit/'+templeId+'/'+templeName)">编辑</button>
					              <div  class="dataTables_wrapper form-inline dt-bootstrap " style='height: 100%;width: 98%;'>
					              	<div class="row">
						              	<div class="col-sm-12" style='padding: 0px;'>
							              	<table id='dishTable' style='width: 100%; position: relative;height:90%; display: block;' id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
								                <thead style='display: inline-table;width: 100%;background: #ffffff;'>
									                <tr role="row">
									                	<th    style="width: 12%;">菜品名称</th>
									                	<th  style="width: 8%;">单位</th>
									                	<th  style="width: 12%;">供应数量</th>
									                	<th   style="width: 12%;">所属类别</th>
									                	<th   style="width: 9%;">操作</th>
									                </tr>
								                </thead>
								              <tbody id='dataList' style='display: inline-table;width: 100%;'>
										                <tr ng-click="itemSelected($event)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="dish in dishesInfors">
											                  <td style="width: 12%;display: none;">{{dish.id}}</td><!--菜品id-->
											                  <td style="width: 12%;">{{dish.name}}</td>
											                  <td style="width: 8%;" >{{dish.unit}}</td>
											                  <td style="width: 12%;">{{dish.count}}</td>
											                  <td style="width: 12%;">{{dish.category}}</td>
															  				<td style="width: 9%;" >
															  					<a href=""  class="btn btn-lg del" style="padding:0px" title="删除" ng-click="dish_del(dish.id,dish.name)"><i class="fa  fa-close"></i></a>
															  				</td>
										                </tr>
								                </tbody>
							                <tfoot>
							                </tfoot>
						             	  </table>
					              	</div>
				              	</div> 
				            	</div>
			          
    		</div>
    		 
    </div> 
</div>
<!-- 删除菜品modal  -->
  <div class="modal fade" id="cancelDish" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	确定删除&nbsp;&nbsp;&nbsp;&nbsp;{{dish_name}}？
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click=del_dish(dish_id);>确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 模态框 新增模板 -->
<div class="modal fade" id="addTemple" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">新增模板</h4>
      </div>
      <from>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	  <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">模板名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-model="templeName_add" >
                            <span style="color: red;" ng-show="templeName_add==''"><i class="fa fa-close"></i>模板名称不能为空</span>
                             <!--<input type="text" class="form-control" placeholder="类别名称" ng-model="categoryName" ng-required="true">-->
                        </div>
                    </div>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-lg" ng-click="addTemple_true();">确定</button>
      </div>
      </from>
    </div>
  </div>
</div>
<!-- 模态框 修改模板 -->
<div class="modal fade" id="updateTemple" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">修改模板</h4>
      </div>
      <from>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	  <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">模板名称</label>
                        <div class="col-sm-10">
                        		<input type="hidden" class="form-control" ng-model="templeId" >
                            <input type="text" class="form-control" ng-model="templeName" >
                            <span style="color: red;" ng-show="templeName==''"><i class="fa fa-close"></i>模板名称不能为空</span>
                             <!--<input type="text" class="form-control" placeholder="类别名称" ng-model="categoryName" ng-required="true">-->
                        </div>
                    </div>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-lg" ng-click="updateTemple_true();">确定</button>
      </div>
      </from>
    </div>
  </div>
</div>
<!-- 删除模板 -->
  	<div class="modal fade" id="delTemple" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	确定要删除<span ng-bind="templeName"></span>吗？
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click="del_temple(templeId);">确定</button>
      </div>
    </div>
  </div>
</div>
<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 ;}
	.even{background-color: #ffffff ;}
	.btn{    padding: 10px 12px;}
</style>
<script>
					$(document).ready(function() {
							
//							$('#table_example').hide();
  							//$('#example').dataTable();
					} );
					
				
	
</script>